<template>
  <CommonCard title="今日交易用户数" :value="numberFormat(orderUser)">
    <div ref="barChartRef" style="width:100%;height:100%"></div>

    <template #foot>
      <span>退货率</span>
      <span class="emphasis">{{returnRate}}</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue'
export default {
  name: 'TodayUser',
  components: {
    CommonCard
}
}
</script>

<script lang="ts" setup>
import { ref, onMounted,computed ,watch} from 'vue'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()

// 交易用户数
const orderUser = computed(()=>reportDataStore.reportData.orderUser)
// 退货率
const returnRate = computed(()=>reportDataStore.reportData.returnRate)
// Y轴数据
const orderUserTrend = computed(()=>reportDataStore.reportData.orderUserTrend)
// x轴数据
const orderUserTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis ||[]) 

const barChartRef = ref()
let barChart: EChartsType


const getOption = () => {
  return {
    grid: {
      left: 0,
      right: 0
    },
    xAxis: {
      show: false,
      // data: ['1', '2', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      data:orderUserTrendAxis.value
    },
    yAxis: {
      show: false
    },
    series: {
      nmae: '实时交易用户',
      type: 'bar',
      // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123]
      data:orderUserTrend.value
    },
     // 显示提示
     tooltip: {
      trigger: 'axis',
      confine: true
    }
  }
}

// 页面挂载完毕的时候要执行
onMounted(() => {
  barChart = echarts.init(barChartRef.value)
  barChart.setOption(getOption())

  // 当页面尺寸变化的时候，也需要变化
  window.addEventListener('resize', () => {
    barChart && barChart.resize()
  })
})

watch(orderUser, () => {
  barChart.setOption(getOption())
})
</script>

<style lang="scss" scoped>

</style>